<template>
  <view class="container">
    <mescroll-body
      :sticky="true"
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      :up="upOption"
      :down="downOption"
    >
      <NavBar
        :isBack="false"
        :isText="false"
        :showPlaceholder="false"
        :isFixed="isFixed"
        comeFrom="goods"
        searchText="请输入您要搜索的商品"
        :statusBarBg="statusBarBg"
        :navBarBg="navBarBg"
      ></NavBar>
      <Swiper-banner
        ref="banner"
        height="200"
        circular
        indicatorDots="true"
        indicatorColor="rgba(255,255,255,0.5)"
        indicatorActiveColor="rgba(0,0,0,0.4)"
        :autoplay="true"
      ></Swiper-banner>
      <view :style="{zIndex:99,position:'sticky',top:tabCeilingTop+'px',backgroundColor:'#fff'}">
        <Tab></Tab>
      </view>
      <swiper
        :style="{height: swiperHeight}"
        :current="currentIndex"
        @change="changeSwiper"
        circular="true"
        duration="100"
      >
        <swiper-item v-for="(item,index) of 4" :key="index">
          <Mescroll-item
            ref="mescrollItem"
            :i="index"
            :index="currentIndex"
            :type="type"
            :sort="sort"
            :height="swiperHeight"
            :disable-scroll="disableScroll"
          ></Mescroll-item>
        </swiper-item>
      </swiper>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
import { mixin } from '@/common/mixin'
import SwiperBanner from '@/components/QS-Gradient-Swiper/QS-Gradient-Swiper-vue'
import Tab from './components/Tab'
import MescrollItem from './components/Mescroll-item.vue'
export default {
  mixins: [MescrollMixin, mixin],
  components: {
    SwiperBanner,
    Tab,
    MescrollItem
  },
  data () {
    return {
      bannerData: [],
      upOption: {
        use: false
      },
      downOption: {
        auto: false
      },
      bgColor: ['#304884', '#5d3801', '#010e1f', '#100000', '#896950'],
      sort: 'created',
      type: 'all',
      currentIndex: 0,
      isFixed: false,
      statusBarBg: '#304884',
      navBarBg: "rgba(0,0,0,0)",
      disableScroll: true,
      swiperHeight: ""
    }
  },
  watch: {
    currentIndex (i) {
      if (this.disableScroll) {
        this.disableScroll = false
        this.$nextTick(() => {
          let mescroll = this.getMescroll(i)
          mescroll && mescroll.scrollTo(0, 0)
          setTimeout(() => {
            this.disableScroll = true
          }, 300)
        })
      }
    }
  },
  onLoad () {
    this.swiperHeight = uni.getSystemInfoSync().windowHeight - this.tabCeilingTop + 40 + 'px'
  },
  computed: {
    tabCeilingTop () {
      return this.statusBarHeight + this.navBarHeight
    }
  },
  onReady () {
    // #ifdef H5
    uni.pageScrollTo({ scrollTop: 0, duration: 0 })
    // #endif
    this.getSwiperBanner()
    uni.$on('giveShopSort', this.getShopSort)
    uni.$on('giveShopTab', this.getShopTab)
  },
  onUnload () {
    uni.$off('giveShopSort', this.getShopSort)
    uni.$off('giveShopTab', this.getShopTab)
  },
  methods: {
    async getSwiperBanner () {
      const { code, data } = await this.$axios.api.getProduct({
        isTop: 1,
        type: 'ps'
      })
      if (code === 200) {
        data.forEach((item, index) => {
          this.bannerData[index] = {
            _id: item._id,
            path: item.coverPic,
            backgroundColor: this.bgColor[index]
          }
        })
        this.$refs.banner.setData(this.bannerData)
      }
    },
    getShopSort (sort) {
      this.sort = sort
    },
    getShopTab (data) {
      this.type = data.type
      this.currentIndex = data.index
    },
    changeSwiper (e) {
      const { current } = e.detail
      this.currentIndex = current
      //切换swiper时,获取对应的type值
      switch (current) {
        case 0:
          this.type = 'all'
          break
        case 1:
          this.type = 'ps'
          break
        case 2:
          this.type = 'vi'
          break
        case 3:
          this.type = 'other'
          break
      }
      uni.$emit('giveShopSwiperIndex', current)
    },
    async downCallback () {
      const that = this
      this.getMescroll(this.currentIndex).resetUpScroll()
      setTimeout(function () {
        that.mescroll.endSuccess()
      }, 1000)
    },
    getMescroll (i) {
      let mescrollItems = this.$refs.mescrollItem;
      if (mescrollItems) {
        let item = mescrollItems[i]
        if (item) return item.mescroll
      }
      return null
    },
    onPageScroll (e) {
      const scrollTop = e.scrollTop;
      if (scrollTop < 160) {
        this.isFixed = false
        this.statusBarBg = '#304884'
        this.navBarBg = "rgba(0,0,0,0)"
        this.disableScroll = true
      } else {
        this.isFixed = true
        this.statusBarBg = "rgb(31, 182, 131)"
        this.navBarBg = "rgb(31, 182, 131)"
        this.disableScroll = false
      }
    }
  }
}
</script>

